<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卓子良</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        input {
            -webkit-appearance: none;
        }

        ul {
            list-style: none;
        }

        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            width: 100%;
            margin: 0 auto;
            min-width: 320px;
            max-width: 540px;
            background: #F6F6F6;
            font-size: 14px;
            font-family: -apple-system, Helvetica, sans-serif;
            line-height: 1.5;
            color: #666;
            height: 1000px;
        }

        /* 去除图片底部的空白缝隙 */
        img {
            vertical-align: top;
        }

        .top {
            height: 50px;
            line-height: 50px;
            background-color: #232326;
            color: #fff;
            text-align: center;

        }

        .top ul li {
            float: left;
        }

        .top ul li:nth-child(1) {
            width: 8%;
        }

        .top ul li:nth-child(1) img {
            width: 16px;

        }

        .top ul li:nth-child(2) img {
            width: 40px;
            height: 40px;
        }

        .top ul li img {

            vertical-align: middle;
        }

        .top ul li:nth-child(2) {
            width: 10%;
        }

        .top ul li:nth-child(3) {

            font-size: 18px;
            width: 57%;
        }

        .top ul li:nth-child(4) {
            width: 25%;
            background-color: #cd2525;

        }

        .sou {
            height: 80px;
            background-color: #c82519;
        }

        .hezi {
            position: sticky;
            top: 0;
            height: 44px;
            line-height: 44px;
            color: #fff;
            overflow: hidden;
            background-color: #C82519;
            z-index: 9;

        }

        .hezi .zuo {
            width: 40px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .hezi .zuo::before {
            content: '';
            display: block;
            background-image: url("./img/下载.png");
            width: 20px;
            height: 18px;
            background-size: 20px 18px;
            margin: 14px 0px 0px 15px;
        }

        .hezi .zhong {
            margin: 8px 50px;
            height: 30px;
            border-radius: 15px;
            background-color: #fff;
            position: relative;
        }

        .hezi .you {
            width: 40px;
            position: absolute;
            top: 0;
            right: 0;

        }

        .bigbox img {
            width: 100%;
            background-color: #5a8ff9;



        }

        .jd-icon {
            width: 20px;
            height: 15px;
            background: url("./img/京东.png");
            background-size: 20px 15px;
            /*  margin: 8px 8px 0px 15px; */
            position: absolute;
            top: 8px;
            left: 13px;
        }

        .jd-icon::after {
            content: '';
            display: block;
            width: 1px;
            height: 15px;
            background-color: #ccc;
            position: absolute;
            top: 0px;
            right: -8px;
        }

        .zhong .sou {
            position: absolute;
            width: 18px;
            height: 15px;
            background-color: pink;
            top: 8px;
            left: 50px;
            background: url("./img/综合小图标.png");
            background-size: 200px;
            background-position: -83.5px 0;
        }

        .icon {
            height: 170px;
            display: flex;
            flex-wrap: wrap;
        }

        .icon li {
            flex: 20%;
            text-align: center;
            color: #666;
        }

        .icon li img {
            /*  margin: 10px 0px 0px; */
            width: 44px;
        }

        .icon li span {
            display: block;
        }

        .news li img {
            width: 100%;
        }

        .dibu {
            position: fixed;
            background-color: #fff;
            height: 80px;
            left: 50%;
            width: 100%;
            transform: translate(-50%);
            max-width: 540px;
            bottom: 0px;
            text-align: center;

            vertical-align: middle;
        }

        .dibu li {
            width: 20%;
            height: 60px;
            float: left;
        }

        .dibu li img {
            width: 100%;

        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        /*  .swiper-pagination{
        position: absolute;
        width: 30%;
        left: 0;
        right: 0;
        margin: 0 auto;
        /* bottom: 10px; */
        .box {
            height: 180px;
        }
    </style>
</head>

<body>
    <!-- 顶部   375*50   16 35 150 112   
              8% 10% 57% 25%          
    -->
    <div class="top">
        <ul>
            <li><img src="./img/关闭.png" alt=""></li>
            <li><img src="./img/logo.png" alt=""></li>
            <li>打开京东app,购物轻松又实惠</li>
            <li>立即打开</li>


        </ul>
    </div>

    <!-- 导航条 -->
    <div class="hezi">
        <div class="zuo">
        </div>
        <div class="zhong">
            <div class="jd-icon"></div>
            <div class="sou"></div>
            <!-- <input type="text"> -->
        </div>
        <div class="you">登录
        </div>
    </div>


    <!-- 主体部分 -->
    <div class="maincontent">

        <!-- 轮播图框 -->
        <div class="bigbox">
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"> <a href="javascript:;"><img src="./img/奇妙夜.jpg"></a></div>
                    <div class="swiper-slide"> <a href="javascript:;"><img src="./img/家具.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="javascript:;"><img src="./img/旅途.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="javascript:;"><img src="./img/洁面乳.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="javascript:;"><img src="./img/洁面乳2.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="javascript:;"><img src="./img/联想游戏本.jpg"></a></div>
                    <div class="swiper-slide"> <a href="javascript:;"><img src="./img/购物狂欢.jpg" alt=""></a></div>
                    <div class="swiper-slide"> <a href="javascript:;"><img src="./img/露营.jpg" alt=""></a></div>
                </div>
            </div>
            <!-- Add Pagination -->
            <!--   <div class="swiper-pagination"></div> -->
        </div>
    </div>
    <div class="box">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <!-- 图标 nav 部分-->
                    <ul class="icon">
                        <li><a href="javascript:;"><img src="./img/0.png" alt=""></a><span>领奖帖</span></li>
                        <li><a href="javascript:;"><img src="./img/1.png" alt=""></a><span>数码电器</span></li>
                        <li><a href="javascript:;"><img src="./img/3.png" alt=""></a><span>9.9元拼</span></li>
                        <li><a href="javascript:;"><img src="./img/4.png" alt=""></a><span>京东超市</span></li>
                        <li><a href="javascript:;"><img src="./img/5.png" alt=""></a><span>充值缴费</span></li>
                        <li><a href="javascript:;"><img src="./img/6.png" alt=""></a><span>领券</span></li>
                        <li><a href="javascript:;"><img src="./img/7.png" alt=""></a><span>京东到家</span></li>
                        <li><a href="javascript:;"><img src="./img/8.png" alt=""></a><span>尊享会员</span></li>
                        <li><a href="javascript:;"><img src="./img/9.png" alt=""></a><span>京东生鲜</span></li>
                        <li><a href="javascript:;"><img src="./img/10.png" alt=""></a><span>全部</span></li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <!-- 图标 nav 部分-->
                    <ul class="icon">
                        <li><a href="javascript:;"><img src="./img/10.png"></a><span>全部</span></li>
                        <li><a href="javascript:;"><img src="./img/1.png" alt=""></a><span>数码电器</span></li>
                        <li><a href="javascript:;"><img src="./img/3.png" alt=""></a><span>9.9元拼</span></li>
                        <li><a href="javascript:;"><img src="./img/4.png" alt=""></a><span>京东超市</span></li>
                        <li><a href="javascript:;"><img src="./img/5.png" alt=""></a><span>充值缴费</span></li>
                        <li><a href="javascript:;"><img src="./img/6.png" alt=""></a><span>领券</span></li>
                        <li><a href="javascript:;"><img src="./img/7.png" alt=""></a><span>京东到家</span></li>
                        <li><a href="javascript:;"><img src="./img/8.png" alt=""></a><span>尊享会员</span></li>
                        <li><a href="javascript:;"><img src="./img/9.png" alt=""></a><span>京东生鲜</span></li>
                        <li><a href="javascript:;"><img src="./img/0.png" alt=""></a><span>领奖帖</span></li>
                    </ul>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>


    <div class="news">
        <ul>
            <li><a href="javascript:;"><img src="./img/广告.png" alt=""></a></li>
        </ul>
    </div>

    <!-- 底部 -->
    <div class="dibu">
        <ul>
            <li><a href="javascript:;"><img src="./img/首页.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="./img/分类.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="./img/惊喜.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="./img/购物车.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="./img/未登录.png" alt=""></a></li>
        </ul>
    </div>






    <!-- Swiper JS -->
    <script src="./js/swiper.min.js"></script>

    <!-- Initialize Swiper -->


    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
            },
        });
    </script>



</body>

</html>